<template>
	<view class="content">
	  <view class="my-info">
		  <image class="myPhoto" src="../../static/logo.png" mode=""></image>
		  <view class="myInfo">
		  	<view class="name">{{userInfo.realName}}</view>
		  	<view class="phone">服务时间：{{userInfo.serviceTimeZone}}
			<uni-icons type="list" @click="historyFn" class="order-list" size="16">
			</uni-icons>
			</view>
		  	<view class="phone">工号：{{userInfo.jobNo}}</view>
		  </view>
	  </view>
	  <view class="await-order-list">
	     <scroll-view  
			v-if='list.length > 0'
			class="scroll-Y" 
			scroll-y="true"
			refresher-enabled='true'
			:refresher-triggered='refreshe'
			@refresherrefresh='update'
			lower-threshold='0'
			@scrolltolower="lower">
	  	 <view class="await-order-item" v-for='(item,i) in list' :key="i" @click="goDetail(i)">
			 <view class="order-title">订单号：{{item.sn}}</view>
			 <view class="order-info">
			 	<view class="info-item flexBC">
			 		<view class="name">服务项目：</view>
			 		<view class="value">{{item.washMenuName}}</view>
			 	</view>
				<view class="info-item flexBC">
					<view class="name">车辆信息：</view>
					<view class="value">{{item.licensePlate}}&nbsp;|&nbsp;{{item.color}}&nbsp;|&nbsp;{{item.cartType}}</view>
				</view>
				<view class="info-item flexBC">
					<view class="name">服务时间：</view>
					<view class="value">{{item.appointmentTime}}<text style="color: #FF3E3E;margin-left: 10rpx;">{{item.tag}}</text></view>
				</view>
				<view class="info-item flexBC">
					<view class="name">服务地址：</view>
					<view class="value address">
						<view>{{item.serviceAddress}}</view>
						<image :src="$getImageSrc('home_ic_dw.png')" mode=""></image>
					</view>
				</view>
			 </view>
			 <view class="order-btns">
			 	<view class="tip"  v-if='item.orderStatus - 3 === 0'>服务中...</view>
				<view class="btns">
					<button v-if='item.orderStatus - 3 === 0' class="btn end" @click.stop='finishServe(i)' type="default">结束服务</button>
					<button v-if='item.orderStatus - 1 === 0' class="btn zd" @click.stop="zdFn(i)" type="default">请求转单</button>
					<button v-if='item.orderStatus - 1 === 0' class="btn start" @click.stop="startServe(i)" type="default">开始服务</button>
				</view>
			 </view>
		 </view>
		 <view style="height:180rpx"></view>
		</scroll-view>
		<no-list tipInfo='您还没有接单,赶快去抢单吧!' v-else></no-list>
	  </view>
	   
	 <my-popup
	    ref="myPopup"
	    tipInfo="是否确认请求转单？转单后将不能再重新接收此订单。" 
	    leftBtn="确认"
	    rightBtn="暂不转单"
	    @clickFn="sureOrder"
	 ></my-popup>
	</view>
</template>

<script>
	import { orderlist,transferOrder } from '@/untils/api'
	export default {
		data() {
			return {
				params:{
					pageNum:1,
					pageSize:20
				},
				list:[],
				refreshe:false,
				sn:'',
				allTotal:0,
				userInfo:null
			}
		},
		onShow() {
		   this.userInfo = this.$getStorageSync('userInfo') || ''
           this.getOrderlist()
		},
		methods: {
		 goDetail(i){
			// this.$setStorageSync('orderInfo', this.list[i])
			uni.navigateTo({
				url:'/pages/awaitOrder/orderInfo?sn='+this.list[i].sn
			})
		 },
		 historyFn(){
			uni.navigateTo({
				url:'/pages/awaitOrder/historyOrder'
			}) 
		 },
		 finishServe(i){
			this.$setStorageSync('orderInfo', this.list[i])
			let sn = this.list[i].sn;
			uni.navigateTo({
				url:`/subpackage/index/serveInfo?type=finish&sn=${sn}`
			})
		 },
		 startServe(i){
			 this.$setStorageSync('orderInfo', this.list[i])
			 let sn = this.list[i].sn;
			 uni.navigateTo({
			 	url:`/subpackage/index/serveInfo?type=start&sn=${sn}`
			 })
		 },
		 zdFn(i){
			this.sn = this.list[i].sn
			this.$refs.myPopup.$refs.myPopup.open()
		 },
		 sureOrder(type){
			 if(type === 'left'){
				transferOrder({sn:this.sn}).then((res) => {
					if(res.code - 200 === 0){
						uni.showToast({
							icon:'none',
							title:'转单成功',
							success:()=>{
								this.getOrderlist()
							}
						})
					}
				}) 
			 }
		 },
		 lower(){
			 if(this.list.length >= this.allTotal){
				  console.log('已请求完所有数据…')
				  return false;
			  }
			  this.params.pageNum += 1
			  this.getOrderlist()
		 },
		 update(){
			this.refreshe = true
		  setTimeout(() => {
			  this.params.pageNum = 1
			  this.refreshe = false
			  this.getOrderlist()
		  },1000) 
		 },
         getOrderlist(){
			orderlist(this.params).then((res) => {
				if(this.params.pageNum - 1 === 0){
                  this.list = res.data.records
				}else{
				   this.list.push(...res.data?.records)
				}
				this.allTotal = res.data.total
			})
		 }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100%;
		background-image: url('../../static/image/bg_fwd.png');
		background-color: #F7F7F7;
		background-repeat:no-repeat;
		background-position: top;
		background-size: 100%;
		overflow: hidden;
		position: relative;
		.my-info{
			width: 686rpx;
			margin: 0 auto;
			margin-top: 200rpx;
			overflow: hidden;
			height: 170rpx;
			margin-bottom: 40rpx;
			.myPhoto{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				border: 1px solid #fff;
				float: left;
			}
			.myInfo{
				color: #11113A;
				margin-left: 30rpx;
				float: left;
				.name{
					font-size: 32rpx;
					font-weight: 800;
					line-height: 80rpx;
				}
				.phone{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					overflow: hidden;
					.order-list{
						margin-left: 10rpx;
						margin-top: 6rpx;
					}
				}
			}
		}
		.await-order-list{
			width: 686rpx;
			margin: -30rpx auto 0;
			font-size: 28rpx;
			height: calc(100% -  190rpx);
			overflow: hidden;
			.scroll-Y{
				height: 100%;
			}
			.await-order-item{
				width: 650rpx;
				margin: 0 auto 40rpx;
				overflow: hidden;
				background-color: #fff;
				border-radius: 20rpx;
				.order-title{
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					background: linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 100%);
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					border-bottom: 1px solid #f7f7f7;
					color: #2A2B2B;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
				.order-info{
					color: #AEB3B3;
					width: 650rpx;
					margin: auto;
					padding: 0 20rpx;
					box-sizing: border-box;
					.info-item{
						min-height: 80rpx;
						line-height: 80rpx;
						.name{
							width: 150rpx;
						}
						.value{
							display: flex;
							justify-content: flex-start;
						}
						.address{
							display: flex;
							width: calc(100% - 190rpx);
							line-height: 40rpx;
							align-items: center;
							justify-content: flex-end;
						}
						image{
							width: 56rpx;
							height: 32rpx;
							margin-left: 8rpx;
						}
					}
				}
				.order-btns{
					height: 100rpx;
					overflow: hidden;
					width: 650rpx;
					margin: 0 auto;
					font-size: 28rpx;
					color: #fff;
					padding: 0 20rpx;
					box-sizing: border-box;
					border-top: 1px solid #eee;
					.tip{
						float: left;
						color: #02B1AA;
						line-height: 100rpx;
					}
					.btns{
						float: right;
						display: flex;
						margin-top: 14rpx;
					}
					.btn{
						width: 196rpx;
						height: 72rpx;
						line-height: 72rpx;
						text-align: center;
						border-radius: 40rpx;
						font-size: 28rpx;
						color: #fff;
					}
					.start{
						margin-left: 20rpx;
						background: #02B1AA;
					}
					.end{
						background: #FF3E3E;
					}
					.zd{
						background: #F96501;
					}
				}
			}
		}
	}
</style>
